<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name = "format-detection" content = "telephone=no">
    <title>title</title>
    <link rel="stylesheet" type="text/css" href="../css/api.css"/>
    <style>
        html, body {
            background-color: #f8f8f8;
        }
        .main ul li .li_box {
            height: 50px;
            line-height: 50px;
            display: -webkit-box;
            display: -webkit-flex;
            align-items: center;
            background-color: #fff;
            border-bottom: 1px solid #e8e8e8;
            padding: 0 15px;
        }
        .main ul li:first-child .li_box {
            height: 65px;
            line-height: 65px;
        }
        .main ul li:last-child .li_box {
            border-bottom: none;
        }
        .main ul li .li_box .li_boxl {
            font-size: 15px;
            color: #333;
        }
        .main ul li .li_box .li_boxc {
            color: #999;
            font-size: 12px;
            padding: 0 10px;
            flex: 1;
            -webkit-flex: 1;
            box-flex: 1;
            -webkit-box-flex: 1;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            text-align: right;
        }
        .main ul li .li_box .li_boxc .li_img {
        	width: 43px;
        	height: 43px;
        	border-radius: 5px;
        	overflow: hidden;
        	float: right;
        }
        .main ul li .li_box .li_boxc .li_img img {
        	width: 100%;
        	height: 100%;
        	object-fit: cover;
        }
        .main ul li .li_box .li_boxr img {
        	height: 13px;
        	display: block;
        }
    </style>
</head>
<body>
    <div class="main">
    	<ul>
    		<li onclick="fnUploadImg();" tapmode>
                <div class="li_box">
                    <div class="li_boxl">店铺LOGO</div>
                    <div class="li_boxc">
                    	<div class="li_img">
                    		<img class="shop_head" src="../image/default.png">
                    	</div>
                    </div>
                    <div class="li_boxr">
                        <img src="../image/right.png">
                    </div>
                </div>
            </li>
    		<li onclick="fnCommonEdit('name','店铺名称','店铺名称','text');"  tapmode>
                <div class="li_box">
                    <div class="li_boxl">店铺名称</div>
                    <div id="name" class="inp_value li_boxc shop_name"></div>
                    <div class="li_boxr">
                        <img src="../image/right.png">
                    </div>
                </div>
            </li>
            <li onclick="fnCommonEdit('phone','店铺电话','店铺电话','number');"  tapmode>
                <div class="li_box">
                    <div class="li_boxl">联系电话</div>
                    <div id="phone" class="li_boxc phone"></div>
                    <div class="li_boxr">
                        <img src="../image/right.png">
                    </div>
                </div>
            </li>
            <li onclick="fnCommonEdit('address','店铺地址','店铺地址','text');"  tapmode>
                <div class="li_box">
                    <div class="li_boxl">店铺地址</div>
                    <div id="address" class="li_boxc address"></div>
                    <div class="li_boxr">
                        <img src="../image/right.png">
                    </div>
                </div>
            </li>
            <li onclick="fnCommonEdit('start_delivery','起送金额','起送金额','number');"  tapmode>
                <div class="li_box">
                    <div class="li_boxl">起送金额</div>
                    <div id="start_delivery" class="li_boxc start_delivery"></div>
                    <div class="li_boxr">
                        <img src="../image/right.png">
                    </div>
                </div>
            </li>
            <li onclick="fnChoseBeginTime();" tapmode>
                <div class="li_box">
                    <div class="li_boxl">营业开始时间</div>
                    <div class="li_boxc begin_time">8:00</div>
                    <div class="li_boxr">
                        <img src="../image/right.png">
                    </div>
                </div>
            </li>
            <li onclick="fnChoseEndTime();" tapmode>
                <div class="li_box">
                    <div class="li_boxl">营业结束时间</div>
                    <div class="li_boxc end_time">22:00</div>
                    <div class="li_boxr">
                        <img src="../image/right.png">
                    </div>
                </div>
            </li>
    	</ul>
    </div>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/zepto.js"></script>
<script type="text/javascript" src="../script/common.js"></script>
<script type="text/javascript">
    var shopInfo = false; // 默认没有店铺信息
    apiready = function(){
        shop = $api.getStorage('shop_data');
        fnGetUser();
        obj = {};
        api.addEventListener({
            name: 'editShopInfoEvent'
        }, function(ret, err) {
            if (ret) {
                var edit_label = ret.value.edit;
                var edit_value = ret.value.value;
                var edit_desc = ret.value.desc;
                obj[edit_label] = edit_value;
                if(edit_desc.length > 12) {
                    $('#'+edit_label).text(edit_desc.substring(0,12)+'...');
                }else {
                    $('#'+edit_label).text(edit_desc);
                }
            }
        });

        api.addEventListener({
            name: 'shopHeadChangeEvent'
        }, function(ret, err) {
            if (ret) {
                var shop_img = formatHeadImg(ret.value.shop_img);
                $('.shop_head').attr('src',shop_img);
                obj['img'] = ret.value.shop_img;
            }
        });
        api.addEventListener({
            name: 'submitShopEvent'
        }, function(ret, err) {
            if (ret) {
                if(obj.name) {
                    if(obj.name.length > 20) {
                        api.toast({
                            msg: '店铺名称不能长于20字',
                            location : 'middle'
                        });
                        return;
                    }
                }
                if(Object.getOwnPropertyNames(obj).length > 0) {
                    openLoading();
                    api.ajax({
                        url: rootPath+'/api/seller/edit_shop',
                        method: 'post',
                        data: {
                            values: { 
                                shopObj: JSON.stringify(obj),
                                shop_id : shop.id,
                                token:shop.token
                            },

                        }
                    }, function(ret, err) {
                        if (ret) {
                            api.sendEvent({
                                name: 'userChangeEvent',
                                extra: {
                                }
                            });
                            api.toast({
                                msg: '修改成功',
                                location:'middle'
                            });
                            setTimeout(function(){
                                api.closeWin();
                            },1000)
                        } else {
                            alert(JSON.stringify(err.msg));
                        }
                        closeLoading();
                    });
                }else {
                    api.closeWin();
                }
            }
        });
    };

    function fnGetUser() {
        shop = $api.getStorage('shop_data');
        api.ajax({
            url: rootPath+'/api/seller/get_seller_info',
            method: 'get',
            data: {
                values: { 
                    shop_id: shop.id,
                    token:shop.token,
                    id : shop.id
                },
            }
        }, function(ret, err) {
            if (ret) {
                if(ret.status == 200) {
                    shopInfo = ret.data;
                    var head_img = formatHeadImg(ret.data.img);
                    $('.shop_head').attr('src',head_img);
                    $('.shop_name').text(ret.data.name);
                    $('.phone').text(ret.data.phone);
                    $('.address').text(ret.data.address);
                    $('.start_delivery').text(ret.data.start_delivery);
                    $('.begin_time').text(ret.data.begin_time);
                    $('.end_time').text(ret.data.end_time);
                }
            } else {
                
            }
        });
    }

    function fnOpenProtrait() {
        api.openWin({
            name: 'head_portrait',
            url: './head_portrait.html',
            pageParam: {
            }
        });
    }

    function fnCommonEdit(field,name,holder,type) {
        var type = type?type:'text';
        if(!shopInfo){
            api.toast({
                msg: '店铺信息获取失败',
                location : 'middle'
            });
            return;
        }
        var value = shopInfo[field];
        api.openWin({
            name: 'edit_shop',
            url: './edit_shop.html',
            pageParam: {
                field: field,
                name : name,
                holder : holder,
                type: type,
                value : value
            }
        });
    }

    function fnChoseBeginTime() {
        var begin_time = shop.begin_time;
        api.openPicker({
            type: 'time',
            date: begin_time,
            title: '选择开始时间'
         }, function(ret, err) {
            if (ret) {
                if(10 > ret.hour){
                    var hour = '0' + ret.hour;
                }else{
                    var hour = ret.hour;
                }
                if(10 > ret.minute){
                    var minute = '0' + ret.minute;
                }else{
                    var minute = ret.minute;
                }
                var tmp_begin_time = hour+':'+minute;
                obj['begin_time'] = tmp_begin_time;
                $('.begin_time').text(tmp_begin_time);
            } else {
                alert(JSON.stringify(err.msg));
            }
         });
    }

    function fnChoseEndTime() {
        var end_time = shop.end_time;
        api.openPicker({
            type: 'time',
            date: end_time,
            title: '选择开始时间'
         }, function(ret, err) {
            if (ret) {
                if(10 > ret.hour){
                    var hour = '0' + ret.hour;
                }else{
                    var hour = ret.hour;
                }
                if(10 > ret.minute){
                    var minute = '0' + ret.minute;
                }else{
                    var minute = ret.minute;
                }
                var tmp_end_time = hour+':'+minute;
                obj['end_time'] = tmp_end_time;
                $('.end_time').text(tmp_end_time);
            } else {
                alert(JSON.stringify(err.msg));
            }
         });
    }

    function fnUploadImg() {
        var UIMultiSelector = api.require('UIMultiSelector');
        UIMultiSelector.open({
             rect: {
                 h: 210
             },
             text: {
                 title: '上传头像',
                 leftBtn: '',
                 rightBtn: '取消',
             },
             max: 0,
             singleSelection: true,
             styles : {
                mask: 'rgba(0,0,0,0.3)',
                title: {
                    bg: '#eef2f3',
                    color:'#000',
                    size: 16,
                    h: 50
                },
                leftButton: {
                    bg: 'rgba(0,0,0,0)',
                    w: 80,
                    h: 0,
                    marginT: 5,
                    marginR: 8,
                    color: '#fff',
                    size: 14
                },
                rightButton: {
                    bg: 'rgba(0,0,0,0)',
                    w: 80,
                    h: 35,
                    marginT: 5,
                    marginR: 8,
                    color: '#1dbcd1',
                    size: 14
                },
                item : {
                    h : 80,
                    textAlign : 'center',
                    size:16
                },
                icon: {
                    w:0,
                    h:0,
                    marginT: 0,
                    marginH: 0,
                    bg: '#fff',
                    align: 'left'
                }
             },
             animation: true,
             items: [{
                text : "从手机相册选择",
                status : "normal"
             },{
                text : "拍照",
                status : "normal"
             }]
        }, function(ret, err) {
             if (ret) {
                 if(ret.eventType == 'clickRight') {
                    UIMultiSelector.close();
                 }
                 if(ret.eventType == 'clickItem') {
                    var select_text = ret['items'][0]['text'];
                   if(select_text == '拍照') {
                        fnChoosePic(0);
                   }else {
                        fnChoosePic(1);
                   }
                    UIMultiSelector.close();
                 }
             } else {
                 showError(err.code,err.msg);
             }
        });
    }

    function fnChoosePic (type_) {
        if(type_)
        {
            // sourceType = 'album';
            sourceType = 'library';
        }
        else
        {
            sourceType = 'camera'; 
        }
        api.getPicture({
            sourceType: sourceType,
            encodingType: 'jpg',
            mediaValue: 'pic',
            destinationType: 'url',
            allowEdit: true,
            quality: 80,
            targetWidth: 100,
            // targetHeight: 100,
            saveToPhotoAlbum: false
        }, function( ret, err ){ 
            if(ret){
                ajaxUploadPic(ret.data);
            }else{
                // showError(err.code,err.msg);
            }
        });
    };
    function ajaxUploadPic (data_) {
        api.ajax({
            url: rootPath+'/api/seller/update_photo',
            method: 'post',
            data: {
                values: { 
                    shop_id: shop.id,
                    token: shop.token,
                },
                files: { 
                    photo: data_
                }
            }
        },function(ret, err){
            if(ret.status == 200)
            {
                var head_img = formatHeadImg(ret.path);
                $('.shop_head').attr('src',head_img);
                obj['img'] = ret.path;
            }else{
               
            }
        });
    };
</script>
</html>